<template>
  <section class="view-section">
    <a-row :gutter="12">
      <a-col :span="8">
        <a-card
          title="小区分布排序"
          hoverable
          style="width: 100%; height: 600px; padding: 20px"
        >
          <div
            id="name-container"
            style="width: inherit; height: inherit"
          ></div>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card
          title="方向分布"
          hoverable
          style="width: 100%; min-width: 600px; height: 600px; padding: 20px"
        >
          <div id="orientation-container"></div>
        </a-card>
      </a-col>
      <!-- <a-col :span="8">
        <a-card title="Card title" hoverable>
          <p>card content</p>
        </a-card>
      </a-col> -->
    </a-row>
    <a-row :gutter="12" style="margin-top: 50px">
      <a-col :span="24">
        <a-card
          title="建造时间"
          hoverable
          style="width: 100%; min-width: 1000px; height: 600px; padding: 20px"
        >
          <div id="year-container"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 50px">
      <a-col span="12">
        <a-card title="区域分布" hoverable style="width: 100%; padding: 20px">
          <div id="area-container"></div>
        </a-card>
      </a-col>
      <a-col span="12">
        <a-card title="区域均价" hoverable style="width: 100%; padding: 20px">
          <div id="mean-price-container"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 50px">
      <a-col :span="16">
        <a-card title="楼层高度" hoverable style="width: 100%; padding: 20px">
          <div id="height-container"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="词云" hoverable style="width: 100%; padding: 20px">
          <div id="word-container"></div>
        </a-card>
      </a-col>
    </a-row>
  </section>
</template>
<script>
import { Bar, Pie, Area, Column, WordCloud } from '@antv/g2plot'
export default {
  data() {
    return {}
  },
  methods: {
    async getNamedata() {
      let data = null
      let res = await this.$http.get(
        '/data_statistics/value_count/property_name/all/'
      )
      if (res.status == 200) {
        data = res.data
        console.log(data)
        this.drawNamePicture(data)
      }
    },
    drawNamePicture(data) {
      data = data.slice(0, 11)
      const bar = new Bar('name-container', {
        data,
        xField: 'value',
        yField: 'name',
        seriesField: 'name',
        legend: {
          position: 'top-left',
        },
      })
      bar.render()
    },
    async getOrientationData() {
      let data = null
      let res = await this.$http.get(
        '/data_statistics/value_count/property_orientation/all/'
      )
      if (res.status == 200) {
        data = res.data
        this.drawOrientationPicture(data)
      }
    },
    drawOrientationPicture(data) {
      const piePlot = new Pie('orientation-container', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'name',
        radius: 0.8,
        label: {
          type: 'outer',
          content: '{name} {percentage}',
        },
        interactions: [
          { type: 'pie-legend-active' },
          { type: 'element-active' },
        ],
      })
      piePlot.render()
    },
    async getYearData() {
      let data = null
      let res = await this.$http.get(
        '/data_statistics/value_count/property_year/all/'
      )
      if (res.status == 200) {
        data = res.data
        data.sort((a, b) => {
          return a['name'] - b['name']
        })
        this.drawYearPicture(data)
      }
    },
    drawYearPicture(data) {
      const area = new Area('year-container', {
        data,
        xField: 'name',
        yField: 'value',
        xAxis: {
          range: [0, 1],
          tickCount: 5,
        },
        areaStyle: () => {
          return {
            fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
          }
        },
      })
      area.render()
    },
    async getAreaData() {
      let data = null
      let res = await this.$http.get(
        '/data_statistics/value_count/property_loc/all/'
      )
      if (res.status == 200) {
        data = res.data
        this.drawAreaPicture(data)
      }
    },
    drawAreaPicture(data) {
      const piePlot = new Pie('area-container', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'name',
        radius: 0.8,
        label: {
          type: 'outer',
        },
        interactions: [{ type: 'element-active' }],
      })

      piePlot.render()
    },
    async getMeanAreaPriceData() {
      let data = null
      let res = await this.$http.get('/data_statistics/mean_area_value/')
      if (res.status == 200) {
        data = res.data
        console.log(data)
        this.drawMeanAreaPricePicture(data)
      }
    },
    drawMeanAreaPricePicture(data) {
      const columnPlot = new Column('mean-price-container', {
        data,
        xField: 'area',
        yField: 'value',
      })

      columnPlot.render()
    },
    async getPropertyHeight() {
      let data = null
      let res = await this.$http.get(
        '/data_statistics/value_count/property_height/all/'
      )
      if (res.status == 200) {
        data = res.data
        data.sort((a, b) => {
          return a['name'] - b['name']
        })
        console.log(data)
        this.drawPropertyHeight(data)
      }
    },
    drawPropertyHeight(data) {
      const columnPlot = new Column('height-container', {
        data,
        xField: 'name',
        yField: 'value',
      })

      columnPlot.render()
    },
    async getWordFreq() {
      let data = null
      let res = await this.$http.get('/data_statistics/word_freq/')
      if (res.status == 200) {
        data = res.data
        this.drawWordPicture(data)
      }
    },
    drawWordPicture(data) {
      const wordCloud = new WordCloud('word-container', {
        data,
        wordField: 'word',
        weightField: 'value',
        color: '#122c6a',
        wordStyle: {
          fontFamily: 'Verdana',
          fontSize: [24, 80],
        },
        // 设置交互类型
        interactions: [{ type: 'element-active' }],
        state: {
          active: {
            // 这里可以设置 active 时的样式
            style: {
              lineWidth: 3,
            },
          },
        },
      })

      wordCloud.render()
    },
  },
  mounted() {
    this.getNamedata()
    this.getOrientationData()
    this.getYearData()
    this.getAreaData()
    this.getMeanAreaPriceData()
    this.getPropertyHeight()
    this.getWordFreq()
  },
}
</script>
<style lang="less" scoped>
.view-section {
  min-height: 800px;
  padding: 20px;
  // overflow: scroll;
  // height: 1200px;
}
</style>